<template>
    <div class="linChart" ref="chartContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    data: {
        type: Array,
        required: true
    },
});
const chartContainer = ref(null);
let myChart = null as any;

const updateChart = () => {
    if (!chartContainer.value) return;

    // Initialize the chart
    myChart = echarts.init(chartContainer.value);

    // Define chart options
    const option = {
        grid: {
            top: '20%',//生成的echarts图片和顶部的距离
            bottom: '2%',//echarts图片和底部的距离
            left: '1%',//echarts图片和左边的距离
            right: '0%',//echarts图片和右边的间距,
            containLabel: true,//当containLabel:为ture时，以上设置生效
        },
        xAxis: {
            type: 'category',
            data: props.data.map((item: any) => item.date),
            axisTick: { show: false },
            name: '月份',
            nameTextStyle: {
                color: '#FFFFFF',
                fontWeight: "normal",
                fontSize: 8,
                verticalAlign: "top",
                lineHeight: 27
            },
            boundaryGap: true,
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)",
                interval: 0,  // 显示所有标签
                formatter: function (value: any) {
                    // 每 5 个字符换行
                    if (value.length > 5) {
                        return value.substring(0, 4) + '\n' + value.substring(4);  // 换行
                    }
                    return value;  // 如果小于 5 个字符则不换行
                },
            }
        },
        yAxis: [{
            type: 'value',
            // boundaryGap: true,
            axisTick: { show: false },
            name: '次',
            nameTextStyle: {
                color: '#FFFFFF',
                fontSize: 10,
                align: "right",
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.1)"
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.3)"
                }
            },
            axisLabel: {
                show: true,
                fontSize: 10,
                color: "rgba(255, 255, 255, 1)"
            }
        }],
        tooltip: {
            trigger: 'axis'
        },
        series: [{
            // name: "",
            type: "bar",
            barWidth: 3,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(0,277,255,1)"
                    },
                    {
                        offset: 1,
                        color: "rgba(0,277,255,0)" // 同样的颜色，因为渐变只在 0% 位置出现
                    }
                ]),
                borderRadius: [1, 1, 0, 0]  // 设置圆角
            },
            data: props.data.map((item: any) => item.value)
        }]

    };
    console.log(option);


    // Set options
    myChart.setOption(option);

    // Handle resize
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// Watch for data changes and update the chart
watch(() => props.data, () => {
    if (myChart) {
        updateChart();
    }
}, { immediate: true });

onMounted(() => {
    updateChart();
});
</script>

<style lang="scss" scoped>
.linChart {
    width: 100%;
    height: vh(198);
}
</style>